<template>
  <div class="login-container">
    <el-card class="login-card" header="请先登录">
      <el-form @submit.native.prevent="login">
        <el-form-item label="用户名">
          <el-input v-model="model.username" placeholder="admin"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="model.password" type="password"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" native-type="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
//import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        model:{
          username:'admin',
          password:'admin'
        }
      }
    },
    computed: {
      //...mapState(['userinfo'])
    },
    methods: {
      //...mapMutations(['setUserInfo']),
      async login(){
        let {data:res} = await this.$http.post('login',this.model)
        //console.log(JSON.stringify(res));
        localStorage.token = res.token//保存在浏览器
        localStorage.username=res.username
        //userinfo保存在localStorage中
        localStorage.user=JSON.stringify(res)
        //userinfo保存在vuex中
        //this.setUserInfo(res)
        //sessionStorage.token = res.data.token
        this.$message({
          type:'success',
          message:'登录成功'
        })
        this.$router.push('/')
      }
    },
  }
</script>

<style lang="scss" scoped>
.login-card{
  width: 25rem;
  margin: 10rem auto;
}
.btn{
  display: flex;
  justify-content: center;
}
</style>